<template>
  <el-card :body-style="{height:'100%'}" shadow="hover" style="height: 100%;">
    <div class="histogram" ref="histogramRef"/>
  </el-card>

</template>

<script lang="ts" name="histogram" setup>
import { getOption } from './options'
import { useEcharts } from '@/hooks/useEcharts'

const histogramRef = ref<HTMLHtmlElement | null>(null)

onMounted(async () => {
  const {setOption,echarts} = useEcharts(histogramRef)
  const options = await getOption(echarts)
  setOption(options)
})
</script>

<style scoped>
.histogram {
  height: 100%;
  width: 100%;
}
</style>
